<template>
  <div style="height: 500px;width: 100%;">
    <graph :data="graphData" ref="graphDom" style="height: 100%;width: 100%;" />
  </div>
</template>

<script>
import graph from '@/components/graph/graph.vue'

export default {
  components: {
    graph
  },
  data() {
    return {
      graphData: {}
    }
  },
  mounted() {
    this.getGraphList()
  },
  methods: {
    async getGraphList() {
      const res = await this.$http.postJson("/api/sendEventLogs", {
        "startTime": "2024-03-22 16:00:53",
        "endTime": "2024-03-22 16:00:53",
        "sourceIp": [
          "ip1"
        ],
        "destinationIp": [
          "ip2"
        ],
        "eventCategory": "MDRAR",
        "eventName": "飞鱼星上网行为管理系统信息泄露漏洞"
      })
      this.initData(res.data)
    },
    initData(res) {
      console.log("res", res)
      let nodes = []
      let edges = []
      nodes = res.nodes.map(item => {
        return {
          id: item.Id,
          label: item.Label,
          info: item
        }
      })
      edges = res.edges.map(item => {
        return {
          source: item.Source,
          target: item.Target,
          label: item.Label,
          info: item
        }
      })
      this.graphData = {
        nodes,
        edges
      }
      console.log("this.graphData", this.graphData)
    },


  }
}
</script>